<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <!-- 移动端meta viewport -->
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="app-mobil-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
     <!-- 移动端 -->
    <title>微博 22001010525 王婕</title>
    <script src="./wang_fonts/iconfont.js"></script>
    <link rel="stylesheet" href="wang_css/weibo(guanzhu).css">
    <link rel="stylesheet" href="wang_css/swiper-bundle.min.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
</head>
<body>
    <header class="wang_header">
        <ul class="top">
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-qiandao"></use>
                </svg>
            </li>
            <li>
                <p>关注</p>
            </li>
            <li>
                <p onclick="window.location.href='weibo(tuijian).html'">推荐</p>

            </li>
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-hongbao"></use>
                </svg>
                </li>
                <div class="box">
                    <div id="content">
                        <ul class="nav">
                            <li>
                                <a href="#">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-jiahao"></use>
                                    </svg>
                                <a href=""></a>
                                <ul class="sub - nav hidden">
                                    
                                    <li>
                                        <a href="#">
                                          <svg class=" icon" aria-hidden="true">
                                          <use xlink:href="#icon-xieboke"></use>
                                        </svg>
                                            <a href="">写微博</a>
                                      </li>
                                    <li>
                                        <a href="#">
                                            <svg class="icon" aria-hidden="true">
                                            <use xlink:href="#icon-tupian"></use>
                                          </svg>
                                         
                                          <a href="">相册</a>
                                   
                                        </li>
                                    <li>
                                        <a href="#">
                                            <svg class="icon" aria-hidden="true">
                                            <use xlink:href="#icon-dianping"></use>
                                          </svg>
                                         
                                          <a href="">点评</a>
                                      
                                        </li>
                                    <li>
                                        <a href="#">
                                        <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-LIVE"></use>
                                      </svg>
                                    
                                      <a href="">直播</a>
                                  
                                       
                                    </li>
                             
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </li>
        </ul>
    </header>    
        <main class="wang_main">       
        <!-- 上图下文 -->
        <div class="huadong">
            <div class="swiper s1">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="./wang_images/weibo(guanzhu)/h1.jpg">
                        <li>
                            <p>主持人高杰</p>
                        </li>
                    </div>
                    <div class="swiper-slide">
                        <img src="./wang_images/weibo(guanzhu)/h2.jpg">
                        <li>
                            <p>宝石</p>
                        </li>
                    </div>
                    <div class="swiper-slide">
                        <img src="./wang_images/weibo(guanzhu)/h3.jpg">
                        <li>
                            <p>湖南卫视</p>
                        </li>
                    </div>
                    <div class="swiper-slide">
                        <img src="./wang_images/weibo(guanzhu)/h4.jpg">
                        <li>
                            <p>华图李梦娇</p>
                        </li>
                    </div>
                    <div class="swiper-slide">
                        <img src="./wang_images/weibo(guanzhu)/h5.jpg">
                        <li>
                            <p>周传雄</p>
                        </li>
                    </div>
                    <div class="swiper-slide">
                        <img src="./wang_images/weibo(guanzhu)/h6.jpg">
                        <li>
                            <p>周震南</p>
                        </li>
                    </div>
                    <div class="swiper-slide">
                        <img src="./wang_images/weibo(guanzhu)/h7.jpg">
                        <li>
                            <p>芒果TV</p>
                        </li>
                    </div>
                    <div class="swiper-slide">
                        <img src="./wang_images/weibo(guanzhu)/h8.jpg">
                        <li>
                            <p>一路繁花</p>
                        </li>
                    </div><div class="swiper-slide">
                        <img src="./wang_images/weibo(guanzhu)/h9.jpg">
                        <li>
                            <p>欧阳娜娜</p>
                        </li>
                    </div><div class="swiper-slide">
                        <img src="./wang_images/weibo(guanzhu)/h10.jpg">
                        <li>
                            <p>央视频</p>
                        </li>
                    </div>
                    
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div> 
        <div class="neirong">
            <div class="tuxiang">
                 <a href="#">
                    <img src="./wang_images/weibo(guanzhu)/13.jpg">
                </a>
            <div class="txt">
                <h3>听月娱乐</h3>
                <span class="fujia1">12-10</span>
                <span class="fujia2">来自微博网页版</span>
                <div class="guanzhu2">
                      <span>+加关注</span>
                </div>
            </div> 
            </div>
            <div class="tuxiang2">
                <p>网友把麦林认成贾玲</p>
                <img src="./wang_images/weibo(guanzhu)/14.jpg">
            </div>
            <div class="kuaijiejian">
                <div class="tuxiang3">
                    <img src="./wang_images/weibo(guanzhu)/15.jpg">
                </div>
                <div class="pinglunsearch">
                    <input type="text" name="search" id="search" placeholder=" 友善评论，文明发言">
                </div>
            </div>
            <div class="santubiao">
                <div class="sanyang">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-zhuanfa"></use>
                        </svg>
                    <p>2062</p>
                </div>
                <div class="sanyang">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-liuyan"></use>
                    </svg>
                     <p>781</p>
                </div>
                <div class="sanyang">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-good"></use>
                    </svg>
                    <p>3255</p>
                </div>
            </div>
        </div>
        <div class="neirong">
            <div class="tuxiang">
                 <a href="#">
                    <img src="./wang_images/weibo(guanzhu)/18.jpg">
                </a>
            <div class="txt">
                <h3>传媒小娱</h3>
                <span class="fujia2">1219人关注了他</span>
                <div class="guanzhu2">
                      <span>+加关注</span>
                </div>
            </div> 
            </div>
            <div class="tuxiang2">
                <p>我是传媒小娱，我就是想做的和别人不一样。 </p>
                <img src="./wang_images/weibo(guanzhu)/17.jpg">
            </div>
            <div class="kuaijiejian">
                <div class="tuxiang3">
                    <img src="./wang_images/weibo(guanzhu)/15.jpg" alt="">
                </div>
                <div class="pinglunsearch">
                    <input type="text" name="search" id="search" placeholder="友善评论，文明发言">
                </div>
            </div>
            <div class="santubiao">
                <div class="sanyang">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-zhuanfa"></use>
                        </svg>
                    <p>55</p>
                </div>
                <div class="sanyang">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-liuyan"></use>
                    </svg>
                     <p>76</p>
                </div>
                <div class="sanyang">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-good"></use>
                    </svg>
                    <p>159</p>
                </div>
            </div>
        </div>
</main>
    <section class="wang_ad"></section>
    
        <!-- 下导航 -->
        <nav class="wang_nav">
            <ul>
                <li>
                    <a href="weibo(guanzhu).html">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-shouye1"></use>
                        </svg>
                        <p>微博</p>
                    </a>
                </li>
                <li>
                    <a href="shipin.html">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-shipin"></use>
                        </svg>
                        <p>视频</p>
                    </a>
                </li>
                <li>
                    <a href="faxian.html">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-sousuo1"></use>
                        </svg>
                        <p>发现</p>
                    </a>
                </li>
                <li>
                    <a href="xiaoxi.html">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-xiaoxi2"></use>
                        </svg>
                        <p>消息</p>
                    </a>
                </li>
                <li>
                    <a href="wo.html">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-wo"></use>
                        </svg>
                        <p>我</p>
                    </a>
                </li>
            </ul>
    
        </nav>
        <footer class="wang_footer">
        <script src="./wang_js/swiper-bundle.min.js"></script>
        <script>
           var swiper1 = new Swiper(".s1", {
             slidesPerView: 5,
             spaceBetween: 5,
           });
           var swiper2 = new Swiper(".s2", {
             slidesPerView: 5,
             spaceBetween: 5,
           });
       </script>
        <!-- 下拉菜单 -->
   <script>   
    var nav = document.querySelector('.nav ');
     var lis = nav.children;
     console.log(nav);
 for (var i = 0; i < lis.length; i++) {
     lis[i].onclick = function() {
         var subNav = this.children[2];
         if (subNav) {
             var iconPlusContainer = this.querySelector('.icon-plus-container');
             if (subNav.style.display === 'none' || subNav.style.display === '') {
                 subNav.style.display = 'block';
                 // 根据加号图标的位置设置下拉菜单的展开位置
                 if (iconPlusContainer) {
                     subNav.style.top = (iconPlusContainer.offsetTop + iconPlusContainer.offsetHeight) + 'px';
                     subNav.style.left = iconPlusContainer.offsetLeft + 'px';
                 } else {
                     // 如果未找到加号图标容器，使用之前的方式设置位置（作为备用）
                     subNav.style.top = (this.offsetTop + this.offsetHeight) + 'px';
                     subNav.style.left = this.offsetLeft + 'px';
                 }
             } else {
                 subNav.style.display = 'none';
             }
         }
     }
 }
 
 // 获取所有下拉菜单
 var subNavs = document.querySelectorAll('.sub-nav');
 // 为整个文档添加点击事件监听器
 document.addEventListener('click', function(event) {
     for (var i = 0; i < subNavs.length; i++) {
         var subNav = subNavs[i];
         if (subNav.style.display === 'block' &&!subNav.contains(event.target)) {
             subNav.style.display = 'none';
         }
     }
 })
     </script>
     
    </footer>
</body>
</html>